import React, { useState } from 'react'
import { Box } from '$components';
import './style.less';
import RingChart from './charts/pie';

function AirQuality(props) {
    // 空气质量数据
    const data = [
        { name: 'PM2.5', value: 7, unit: 'μg/m³' },
        { name: 'PM10', value: 8, unit: 'μg/m³' },
        { name: 'SO₂', value: 11, unit: 'μg/m³' },
        { name: 'NO₂', value: 2, unit: 'μg/m³' },
        { name: 'O₃', value: 51, unit: 'μg/m³' },
        { name: 'CO', value: 0.8, unit: 'mg/m³' }, // CO通常使用mg/m³作为单位
        { name: 'VOCS', value: 0.1, unit: 'ppm' }
    ];

    // 自定义颜色
    const colors = [
        { linearGradientFrom: '#24DDFA', linearGradientTo: '#267FD3' }, // PM2.5
        { linearGradientFrom: '#59D4D4', linearGradientTo: '#3FBCBC' }, // PM10
        { linearGradientFrom: '#F8C86B', linearGradientTo: '#F8A81D' }, // SO₂
        { linearGradientFrom: '#A183E0', linearGradientTo: '#8A66D4' }, // NO₂
        { linearGradientFrom: '#7EE6FB', linearGradientTo: '#5BBEF9' }, // O₃
        { linearGradientFrom: '#FF9B9B', linearGradientTo: '#FF5252' }, // CO
        { linearGradientFrom: '#A2D68B', linearGradientTo: '#4CAF50' }  // VOCS
    ];

    return <Box title={"空气质量监测"}>
        <RingChart
            data={data}
            colors={colors}
            width={220}
            height={220}
            subtext="AQI"
            showUnits={true}
            image={
                {
                    url: '/assets/images/ring_bg.png',
                    width: 106,
                    height: 106,
                }
            }
        />
    </Box>
}

export default AirQuality;


